<template>
  <div class="wrapper qa-content"> 
   <div class="fl left-list"> 
    <div class="tab-content"> 
     <div id="index" class="tab-pane active"> 
      <div class="tab-bottom-line"> 
       <ul class="sui-nav nav-tabs"> 
        <!-- <li class="active"><a href="#new" data-toggle="tab">最新回答</a></li> 
        <li><a href="#hot" data-toggle="tab">热门回答</a></li> 
        <li><a href="#wait" data-toggle="tab">等待回答</a></li>  -->
          <li :class="type=='new'?'qa-li':''"><a @click="type='new'">最新回答</a></li> 
          <li :class="type=='hot'?'qa-li':''"><a @click="type='hot'">热门回答</a></li> 
          <li :class="type=='wait'?'qa-li':''"><a @click="type='wait'">等待回答</a></li> 
       </ul> 
       <div class="qa-list" v-infinite-scroll="loadMore"> 
        <div class="tab-content"> 
         <div id="new" :class="'tab-pane '+(type=='new'?'active':'')"> 
           <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in newlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other">  
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> </li>  
          </ul>
         </div> 
         <div id="hot" :class="'tab-pane '+(type=='hot'?'active':'')"> 
          <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in hotlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other">  
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> </li>  
          </ul>
         </div> 
         <div id="wait" :class="'tab-pane '+(type=='wait'?'active':'')"> 
          <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in waitlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other">  
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> </li>  
          </ul>
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="php" class="tab-pane">
       php 
     </div> 
     <div id="js" class="tab-pane">
       Javascript 
     </div> 
     <div id="python" class="tab-pane">
       python 
     </div> 
     <div id="java" class="tab-pane">
       java 
     </div> 
    </div> 
   </div> 
   <div class="fl right-tag"> 
    <div class="block-btn"> 
     <p>今天，有什么好东西要和大家分享么?</p> 
     <a class="sui-btn btn-block btn-share" href="./qa-submit.html" target="_blank">发布问题</a> 
    </div> 
    <div class="hot-tags"> 
     <div class="head"> 
      <h3 class="title">热门标签</h3> 
     </div> 
     <div class="tags"> 
      <ul class="sui-tag"> 
       <li>Php</li> 
       <li>Javascript</li> 
       <li>Gif</li> 
       <li>Java</li> 
       <li>C#</li> 
       <li>iOS</li> 
       <li>C++</li> 
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="clearfix"></div> 
  </div>     
</template>
<script>
import problemApi from '@/api/qa'
import axios from 'axios'
export default {
    data(){
        return {
            type:'new' ,//默认展示最新回答列表
            page_new:1,
            page_hot:1,
            page_wait:1
        }
    },
    asyncData({params}){
        return axios.all([problemApi.list('newlist',params.label,1,10),
                          problemApi.list('hotlist',params.label,1,10),
                          problemApi.list('waitlist',params.label,1,10)]).then( 
                        axios.spread(function(newlist,hotlist,waitlist ){
                        return {
                            newlist:newlist.data.data.rows,
                            hotlist:hotlist.data.data.rows,
                            waitlist:waitlist.data.data.rows,
                            label:params.label
                        }
        }))
  },
  methods:{
      loadMore(){ //瀑布流分页
            if(this.type === 'new'){
                //最新回答
                this.page_new ++
                problemApi.list('newlist',this.label,this.page_new,10).then(res =>{
                    this.newlist = this.newlist.concat(res.data.data.rows)
                })
            }
            if(this.type === 'hot'){
                //热门回答
                this.page_hot++
                 problemApi.list('hotlist',this.label,this.page_hot,10).then(res =>{
                    this.hotlist = this.hotlist.concat(res.data.data.rows)
                })
            }
            if(this.type === 'wait'){
                //等待回答
                this.page_wait++
                problemApi.list('waitlist',this.label,this.page_wait,10).then(res =>{
                    this.waitlist = this.waitlist.concat(res.data.data.rows)
                })
            }
      }
  }

}
</script>
<style>
.qa-li{
    font-weight: bold;
    border: 0;
    border-bottom: 2px solid #e64620;
    color: #000;
}
</style>
